<template>
    <vol-box
      :lazy="true"
      v-model="model"
      :title="$ts('消息查看')"
      :width="500"
      :padding="5"
      :footer="true"
      :onModelClose="onModelClose"
 
    >
    <div class="app">
      <header>
        <h1>{{$ts(title)  }}</h1>
      </header>
      <main>
        <p>{{ $ts(message) }}</p>
      </main>
      <footer>
        <p>{{time}}</p>
      </footer>
    </div>
  </vol-box>
  </template>
  
  <script>
  import api from '../../api/api.js';
  import VolBox from '@/components/basic/VolBox.vue';
  export default {
    components:{VolBox},
    name: 'App',
    data() {
      return {
        model:false,
        title: '标题',
        message: '内容！',
        time:"",
        ID:''
      };
    },
    methods:{
      onModelClose(){
        this.change(this.ID)
       },
        open(val){
          this.message=val.content
          this.title=val.title
          this.time=val.createDate
          this.model=true
          this.ID=val.id
        },
        async change(val){
          //修改阅读状态
          const res=await api.ReadMessages(val.toString())
          if (res.status) {
            // this.$emit('parentMethod')
            this.$store.getters.data().Message.getlist()
            this.$store.getters.data().indexPage._getlist()
            // this.$message.success(res.message);
          }else{
            this.$message.error(res.message);
          }
          // console.log("修改阅读状态",res)
        }
    }
  };
  </script>
  
  <style scoped>
  .app {
    text-align: center;
  }
  
  header, footer {
    background-color: #f8f8f8;
    padding: 10px;
  }
  
  main {
    padding: 20px;
  }
  </style>
  